<!--文章信息卡-->

<template>
  <div class="articleCard">
    <el-card class="article-content">
      <div class="article-icon">
        <icon data="@icon/book.svg" width="50" height="50" original/>
      </div>

<!--        <router-link :to=`/article/${list.articleConId}`>-->
        <router-link :to="`/article/`+list.articleConId">
          <h2 class="article-title">{{list.title}}</h2>
        </router-link>

      <p claSS="article-text">{{list.summary}}</p>
      <el-divider></el-divider>
      <div class="article-foot">
        <span>
          <icon data="@icon/author.svg" original/>
          <span>{{list.userName}}</span>
        </span>
        <span>
          <icon data="@icon/icon_time.svg" original/>
          <span>{{list.created_at}}</span>
        </span>
        <span>
          <icon data="@icon/icon_comment.svg" original/>
          <span>暂无评论</span>
        </span>

      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: "articleCard",
  props:{
      list:{
        type:Object,
        default:function (){
            return {}
        }
      }
  },
  methods:{}

}
</script>


<style scoped lang="scss">
@import "src/color";
.articleCard{
  margin-bottom: 20px;
  >.article-content{
    border-radius: 6px;
  .article-icon{
    float: left;
    margin-right: 25px;
  }
  .article-title{
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 10px;
  }
  .article-text{
    color: $c-a0a0a0;
    line-height: 2em;
  }
  .article-foot{
    color: $c-a0a0a0;
    >span{
      font-size: 13px;
      padding: 0 5px;

       :first-child{
        margin-right: 10px;
      }

      :last-child{
        vertical-align:bottom;
      }

    }



  }
  }
}

</style>
